import * as Cesium from "cesium";

export function init() {
  // 初始化Cesium
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示查询按钮
    geocoder: false,
    // 不显示home按钮
    homeButton: false,
    sceneModePicker: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    // creditContainer: "credit",
    timeline: false,
    fullscreenButton: false,
    vrButton: false,
    // 天空盒设置
    // skyBox: new Cesium.SkyBox({
    //   sources: {
    //     positiveX: "stars/TychoSkymapII.t3_08192x04096_80_px.jpg",
    //     negativeX: "stars/TychoSkymapII.t3_08192x04096_80_mx.jpg",
    //     positiveY: "stars/TychoSkymapII.t3_08192x04096_80_py.jpg",
    //     negativeY: "stars/TychoSkymapII.t3_08192x04096_80_my.jpg",
    //     positiveZ: "stars/TychoSkymapII.t3_08192x04096_80_pz.jpg",
    //     negativeZ: "stars/TychoSkymapII.t3_08192x04096_80_mz.jpg",
    //   },
    // }),
  });
  // // 角度转弧度
  // const radians = Cesium.Math.toRadians(90)
  // // 弧度转角度
  // const degress = Cesium.Math.toDegrees(2 * Math.PI)

  // // 将经纬度转笛卡尔坐标
  // const cartesian3 = Cesium.Cartesian3.fromDegrees(
  //   // 经度
  //   89.5,
  //   // 维度
  //   20.4,
  //   // 高度
  //   100
  // );
  // console.log(cartesian3);

  // // 将笛卡尔坐标转换为经纬度
  // const cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
  // console.log(cartographic);

  // //   天安门的位置
  //   const position = Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1000);
  //   // 瞬间到达指定的位置
  //   viewer.camera.setView({
  //     destination: position,
  //     orientation: {
  //       // 指定相机的朝向
  //       heading: Cesium.Math.toRadians(0),
  //       // 指定相机的俯视角,0度镜头朝下,90度镜头朝上
  //       pitch: Cesium.Math.toRadians(-45),
  //       // 指定相机的滚转角
  //       roll: 0,
  //     },
  //   });
  // 飞往指定的位置
  //   viewer.camera.flyTo({
  //     destination: position,
  //     orientation: {
  //       // 指定相机的朝向
  //       heading: Cesium.Math.toRadians(0),
  //       // 指定相机的俯视角,0度镜头朝下,90度镜头朝上
  //       pitch: Cesium.Math.toRadians(-45),
  //       // 指定相机的滚转角
  //       roll: 0,
  //     },
  //   });

  // 相机向前移动10米,可以监听事件
  document.addEventListener("keydown", (e) => {
    console.log(e);
    //  获取相机离地面的高度
    const height = viewer.camera.positionCartographic.height;
    const moveRate = height / 10;
    if (e.key === "w") {
      // 前进
      viewer.camera.moveForward(moveRate);
    } else if (e.key === "s") {
      // 后退
      viewer.camera.moveBackward(moveRate);
    } else if (e.key === "a") {
      // 向左
      viewer.camera.moveLeft(moveRate);
    } else if (e.key === "d") {
      // 向右
      viewer.camera.moveRight(moveRate);
    } else if (e.key === "q") {
      // 绕y轴向左旋转
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.1));
    } else if (e.key === "e") {
      // 绕y轴向右旋转
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1));
    } else if (e.key === "r") {
      // 绕x轴向上旋转
      viewer.camera.lookUp(Cesium.Math.toRadians(0.1));
    } else if (e.key === "f") {
      // 绕x轴向下旋转
      viewer.camera.lookDown(Cesium.Math.toRadians(0.1));
    } else if (e.key === "g") {
      // 绕Z轴向左逆时针旋转
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1));
    } else if (e.key === "h") {
      // 绕Z轴向左顺时针旋转
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1));
    }
  });

  //   // 添加物体与3d建筑
  //   //   广州塔的位置
  //   //   const position2 = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000);
  //   const position2 = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 8000000);
  //   // 瞬间到达指定的位置
  //   viewer.camera.setView({
  //     destination: position2,
  //     orientation: {
  //       // 指定相机的朝向
  //       heading: Cesium.Math.toRadians(0),
  //       // 指定相机的俯视角,0度镜头朝下,90度镜头朝上
  //       pitch: Cesium.Math.toRadians(-90),
  //       // 指定相机的滚转角
  //       roll: 0,
  //     },
  //   });

  //   //   添加3d建筑
  //   viewer.scene.primitives.add(
  //     new Cesium.Cesium3DTileset({
  //       // 3d建筑地址
  //       url: "",
  //     })
  //   );

  const point = viewer.entities.add({
    // 点的位置
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 50),
    // // 广告牌
    // billboard: {
    //   // 图片地址
    //   image: "",
    //   width: 30,
    //   height: 30,
    //   //   设置广告牌的显示位置
    //   horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    //   //   设置广告牌的显示位置
    //   verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    // },
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHITE,
      outlineWidth: 4,
    },
  });
  const label = viewer.entities.add({
    // 标签的位置
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 50),
    label: {
      text: "广州塔",
      font: "24px",
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      //  设置文字的偏移量
      pixelOffset: new Cesium.Cartesian2(0, -24),
      //  设置文字的显示位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      //  设置文字的显示位置
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
  });

  //   // 添加3d模型
  //   const airPlane = viewer.entities.add({
  //     name: "airPlane",
  //     position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 500),
  //     model: {
  //       uri: "",
  //       //   设置模型的最小像素
  //       minimumPixelSize: 128,
  //       //   设置飞机的轮廓
  //       silhouetteSize: 10,
  //       // 飞机轮廓的颜色
  //       silhouetteColor: Cesium.Color.WHITE,
  //       // 设置相机距离模型多远的距离显示
  //       distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
  //     },
  //   });

  //   // 创建一个盒子
  //   const blueBox = viewer.entities.add({
  //     name: "Blue box",
  //     position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 0),
  //     box: {
  //       dimensions: new Cesium.Cartesian3(10, 10, 10),
  //       material: Cesium.Color.BLUE,
  //     },
  //   });

  // ===========================实体创建矩形几何体===================
  const rectangleMaterial = Cesium.Color.RED.withAlpha(0.5);
  //   网格材质,实体的材质都是以MaterialProperty结束的方法
  const gridMaterial = new Cesium.GridMaterialProperty({
    color: Cesium.Color.YELLOW,
    cellAlpha: 0.2,
    lineCount: new Cesium.Cartesian2(4, 4),
    lineThickness: new Cesium.Cartesian2(4, 4),
  });
  //  实体创建矩形
  viewer.entities.add({
    id: "entityRectangle",
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(90, 20, 100, 30),
      material: gridMaterial,
    },
  });
  // ===========================实体创建矩形几何体===================

  //   ============================使用primivite创建矩形=============================
  //  primivite创建矩形
  // 1. create a rectangle
  const rectangle = new Cesium.RectangleGeometry({
    ellipsoid: Cesium.Ellipsoid.default,
    rectangle: Cesium.Rectangle.fromDegrees(105, 20, 115, 30),
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  });
  //   const geometry = Cesium.RectangleGeometry.createGeometry(rectangle);

  // 2. 创建几何体实例
  const instance = new Cesium.GeometryInstance({
    id: "redRect",
    geometry: rectangle,
    attributes: {
      // color: Cesium.ColorGeometryInstanceAttribute(250, 250, 250, 0.5),
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.RED.withAlpha(0.5)
      ),
    },
  });

  //  primivite创建矩形
  // 1. create a rectangle
  const rectangle2 = new Cesium.RectangleGeometry({
    ellipsoid: Cesium.Ellipsoid.default,
    rectangle: Cesium.Rectangle.fromDegrees(120, 20, 135, 30),
    height: 0,
    vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
  });
  //   const geometry = Cesium.RectangleGeometry.createGeometry(rectangle);

  // 2. 创建几何体实例
  const instance2 = new Cesium.GeometryInstance({
    id: "blueRect",
    geometry: rectangle2,
    attributes: {
      // color: Cesium.ColorGeometryInstanceAttribute(250, 250, 250, 0.5),
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.BLUE.withAlpha(0.5)
      ),
    },
  });

  // 3. 图元
  const primitive = new Cesium.Primitive({
    geometryInstances: [instance, instance2],
    // 设置材质
    appearance: new Cesium.PerInstanceColorAppearance({
      flat: true,
    }),
  });
  //   4. 添加到viewer
  viewer.scene.primitives.add(primitive);
  //   ============================使用primivite创建矩形=============================

  //   动态修改图元颜色
  setTimeout(() => {
    primitive.getGeometryInstanceAttributes("blueRect").color =
      new Cesium.ColorGeometryInstanceAttribute.toValue(
        // // 改成黄色
        // Cesium.Color.YELLOW.withAlpha(0.5)
        // 随机的颜色
        Cesium.Color.fromRandom({
          alpha: 0.5,
        })
      );
  }, 2000);

  //   ========================================鼠标拾取==============================
  //   点击拾取
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction(function (movement) {
    // movement是点击屏幕的二维坐标
    console.log(movement);
    const pickedObject = viewer.scene.pick(movement.position);
    if (Cesium.defined(pickedObject)) {
      console.log(pickedObject);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  //   ========================================鼠标拾取==============================

  //   ========================线条几何========================
  // 线条颜色
  const materialLine = Cesium.Color.RED;
  //   虚线材质
  const materialDashLine = new Cesium.PolylineDashMaterialProperty({
    dashLength: 16,
    color: Cesium.Color.RED,
  });

  // 箭头材质
  const materialArrowLine = new Cesium.PolylineArrowMaterialProperty(
    Cesium.Color.RED
  );

  // 发光材质
  const materialGlowLine = new Cesium.PolylineGlowMaterialProperty({
    // 设置发光程度
    glowPower: 0.5,
    // 到70%慢慢变细
    taperPower: 0.7,
    color: Cesium.Color.RED,
  });

  viewer.entities.add({
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
      width: 20,
      material: materialGlowLine,
    },
  });
  //   ========================线条几何========================

  viewer.camera.setView(viewer.entities);
}
